<template>
  <main :style="{height: '100%'}">
    <a-layout id="components-layout-demo-top-side-2" :style="{height: '100%'}">
      <a-layout-header class="header">
        <a-menu
          theme="dark"
          mode="horizontal"
          :defaultSelectedKeys="['1']"
          :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="1" @click="$router.push({name: 'HomePage'})">主页</a-menu-item>
          <a-menu-item key="2" @click="$router.push({name: 'ShowPage'})">展示列表</a-menu-item>
          <a-menu-item key="3" @click="$router.push({name: 'DiscussPage'})">讨论组</a-menu-item>
          <a-menu-item key="4" @click="$router.push({name: 'TestFactory'})">测试工厂</a-menu-item>
          <a-sub-menu>
            <span slot="title" class="submenu-title-wrapper"><a-icon type="setting" />菜单</span>
            <a-menu-item-group>
              <a-menu-item key="setting:1" @click="$router.push({name: 'Profile'})">个人资料</a-menu-item>
              <a-menu-item key="setting:2">查看信息</a-menu-item>
              <a-menu-item key="setting:3" @click="switchLogin">{{is_login ? '退出登录' : '前往登录'}}</a-menu-item>
            </a-menu-item-group>
          </a-sub-menu>
        </a-menu>
        <div class="logo" />
      </a-layout-header>
      <a-layout>
        <a-layout style="padding: 0 24px 24px">
          <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px', height: '100%' }">
            <router-view/>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>

  </main>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      collapsed: false
    }
  },
  methods: {
    switchLogin () {
      let is_login = localStorage.getItem("Flag");
      if(is_login){
        this.logOut();
      }
      this.$router.push({name: 'Login'})
    },
    logOut () {
      localStorage.removeItem('Flag');
      localStorage.removeItem('user_id');
      localStorage.removeItem('user_name');
      this.$store.commit('userStatus', false);
    }
  },
  computed: {
    is_login () {
      return this.$store.getters.isLogin
    }
  }
}
</script>

<style scoped>
  /*@import '~ant-design-vue/dist/antd.css';*/
  #components-layout-demo-top-side-2 .logo {
    width: 120px;
    height: 31px;
    background: rgba(255,255,255,.2);
    margin: 16px 28px 16px 0;
    float: left;
  }
</style>
